{% extends "base.html" %}

{% block title %}人脸识别 - Camera Pi{% endblock %}

{% block sidebar %}
<div class="list-group list-group-flush">
    <a href="/video/monitor" class="list-group-item list-group-item-action">
        <i class="bi bi-camera-video"></i> 视频监控
    </a>
    <a href="/video/capture" class="list-group-item list-group-item-action">
        <i class="bi bi-camera"></i> 视频拍照
    </a>
    <a href="/video/face" class="list-group-item list-group-item-action active">
        <i class="bi bi-person-badge"></i> 人脸识别
    </a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mb-4">
            <h2><i class="bi bi-person-badge"></i> 人脸识别</h2>
            <p class="lead">智能人脸识别系统</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="video-container">
                        <img src="{{ url_for('video_feed') }}" class="img-fluid" alt="视频流">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-sliders"></i> 识别设置</h5>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="enableFaceDetection">
                            <label class="form-check-label" for="enableFaceDetection">启用人脸识别</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="enableAlert">
                            <label class="form-check-label" for="enableAlert">启用陌生人提醒</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">识别灵敏度</label>
                        <input type="range" class="form-range" id="sensitivity" min="0" max="100" value="50">
                    </div>
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" onclick="addFace()">
                            <i class="bi bi-person-plus"></i> 添加人脸
                        </button>
                        <button class="btn btn-info" onclick="manageFaces()">
                            <i class="bi bi-people"></i> 管理人脸库
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-clock-history"></i> 识别记录</h5>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>身份</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody id="recognitionList">
                                <!-- 这里将通过JavaScript动态加载识别记录 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function addFace() {
    // 实现添加人脸功能
}

function manageFaces() {
    // 实现管理人脸库功能
}

function loadRecognitionHistory() {
    // 加载识别记录
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    loadRecognitionHistory();
});
</script>
{% endblock %} 